"use client";

/**
 * /w/:workspace/templates — the workspace's page templates (PR-122/123).
 *
 * List   → GET  /workspaces/:wid/templates   ({ data: Template[] } — templates
 *            from this workspace AND every workspace the user belongs to;
 *            builtin rows are read-only)
 * Create → POST /pages/:pageId/templates     (snapshot a page's subtree; from
 *            the "save as template" affordance — the Templates page applies,
 *            the editor's insert dialog creates the source)
 * Apply  → POST /templates/:id/apply         (deep-copies the snapshot into
 *            THIS workspace; the response is the new page — we link to it)
 *
 * Scoping note: the list endpoint intentionally unions every workspace the
 * caller belongs to (the editor's insert dialog reuses templates across
 * workspaces) and the rows carry no workspaceId, so the page shows that union
 * (the same set the insert dialog offers). Recorded, not a filter bug.
 */
import { useMemo, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Copy, Eye, FilePlus2, FileText, Loader2, Lock, Search } from "lucide-react";
import { templateApi } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import { useWorkspace } from "@/hooks/use-workspace";
import { TemplatePreviewDialog } from "@/components/dialogs/template-preview-dialog";
import { TemplateVariableDialog } from "@/components/dialogs/template-variable-dialog";
import { TemplateInfo } from "@/lib/types";

export default function TemplatesPage() {
  const params = useParams<{ workspace: string }>();
  const slugOrId = params?.workspace ?? "";
  const workspaceSlug = params?.workspace ?? "default";
  const router = useRouter();
  const { data: workspace } = useWorkspace(slugOrId);
  const qc = useQueryClient();

  // T-141: the directory is filtered SERVER-side (search = case-insensitive
  // contains on name+description, category = exact). `all` (unfiltered) feeds
  // the category dropdown — the filtered list is narrowed, so the options
  // cannot be derived from it (you could not switch back to another category).
  const [search, setSearch] = useState("");
  const [category, setCategory] = useState("");
  const filtersActive = search.trim() !== "" || category !== "";

  const all = useQuery({
    queryKey: ["workspaces", workspace?.id ?? slugOrId, "templates", "all"],
    queryFn: () => templateApi.list(workspace?.id ?? slugOrId),
    enabled: !!workspace?.id,
    retry: false
  });

  const filtered = useQuery({
    queryKey: ["workspaces", workspace?.id ?? slugOrId, "templates", { search: search.trim(), category }],
    queryFn: () =>
      templateApi.list(workspace?.id ?? slugOrId, {
        ...(search.trim() ? { search: search.trim() } : {}),
        ...(category ? { category } : {})
      }),
    enabled: !!workspace?.id && filtersActive,
    retry: false
  });

  const source = filtersActive ? filtered : all;
  const items = source.data ?? [];
  const isLoading = source.isLoading;
  const isError = source.isError;

  const categories = useMemo(
    () =>
      [...new Set((all.data ?? []).map((t) => t.category).filter((c): c is string => Boolean(c)))].sort(),
    [all.data]
  );

  const [applyingId, setApplyingId] = useState<string | null>(null);
  // T-142: the variable template currently open in the RHF dialog (null = closed).
  const [varsTemplate, setVarsTemplate] = useState<TemplateInfo | null>(null);
  // T-141: the template open in the read-only preview dialog (null = closed).
  const [previewTemplate, setPreviewTemplate] = useState<TemplateInfo | null>(null);
  const apply = useMutation({
    mutationFn: (t: TemplateInfo) =>
      templateApi.apply(t.id, { workspaceId: workspace?.id ?? "", parentId: null, title: t.name }),
    onMutate: (t) => setApplyingId(t.id),
    onSuccess: (page, t) => {
      setApplyingId(null);
      toast("success", `Template “${t.name}” applied`, "Opening the new page…");
      qc.invalidateQueries({ queryKey: ["workspaces", workspace?.id, "templates"] });
      qc.invalidateQueries({ queryKey: ["workspaces", workspace?.id, "page-tree"] });
      router.push(`/w/${workspaceSlug}/page/${page.id}`);
    },
    onError: (err) => {
      setApplyingId(null);
      toast("error", "Could not apply template", err instanceof Error ? err.message : undefined);
    }
  });

  // T-142: a template with declared variables goes through the form dialog
  // (apply WITH values); everything else keeps the one-click apply.
  const hasVariables = (t: TemplateInfo): boolean =>
    Array.isArray(t.variables) && t.variables.length > 0;

  const isOwnerOrAdmin = ["owner", "admin"].includes((workspace?.role ?? "").toLowerCase());

  return (
    <>
    <div className="mx-auto max-w-2xl px-6 py-8">
      <h1 className="mb-1 flex items-center gap-2 text-xl font-semibold">
        <FilePlus2 className="size-5 text-muted-foreground" aria-hidden /> Templates
      </h1>
      <p className="mb-4 text-sm text-muted-foreground">
        Reusable page structures. “Use” duplicates a template into this workspace as a new page.
        {isOwnerOrAdmin ? "" : " (Only owners and admins can apply templates in this workspace.)"}
      </p>

      {/* T-141: directory controls — search (name + description) + category filter. */}
      <div className="mb-4 flex flex-col gap-2 sm:flex-row" data-testid="template-directory-controls">
        <div className="relative flex-1">
          <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" aria-hidden />
          <input
            type="search"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search templates…"
            aria-label="Search templates"
            data-testid="template-search"
            className="w-full rounded-md border border-input bg-background py-1.5 pl-8 pr-2 text-sm placeholder:text-muted-foreground"
          />
        </div>
        <select
          value={category}
          onChange={(e) => setCategory(e.target.value)}
          aria-label="Filter by category"
          data-testid="template-category"
          className="rounded-md border border-input bg-background px-2 py-1.5 text-sm"
        >
          <option value="">All categories</option>
          {categories.map((c) => (
            <option key={c} value={c}>{c}</option>
          ))}
        </select>
        {filtersActive && (
          <button
            type="button"
            onClick={() => { setSearch(""); setCategory(""); }}
            data-testid="template-clear-filters"
            className="rounded-md border border-border px-2 py-1.5 text-xs text-muted-foreground hover:bg-accent"
          >
            Clear
          </button>
        )}
      </div>

      {isLoading && (
        <p className="inline-flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="size-4 animate-spin" /> Loading templates…
        </p>
      )}

      {isError && (
        <p className="rounded-md border border-dashed border-border p-4 text-sm text-muted-foreground">
          Couldn't load templates.
        </p>
      )}

      {!isLoading && !isError && items.length === 0 && (
        <p className="rounded-md border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
          {filtersActive
            ? "No templates match the current search or category."
            : "No templates in this workspace yet. Save one by snapshotting a page, or insert a template from the editor (slash menu → “Insert template”)."}
        </p>
      )}

      <ul className="space-y-1.5">
        {items.map((t) => (
          <li
            key={t.id}
            data-testid={`template-item-${t.id}`}
            className="flex items-center gap-2.5 rounded-md border border-border px-3 py-2"
          >
            <span className="shrink-0 text-lg leading-none" aria-hidden>
              {t.icon || (t.type === "database" ? <FileText className="size-4 text-blue-600" /> : <FileText className="size-4 text-muted-foreground" />)}
            </span>
            <div className="min-w-0 flex-1">
              <p className="flex items-center gap-1.5 truncate text-sm">
                {t.name || "Untitled"}
                {t.isBuiltin && (
                  <span className="inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
                    <Lock className="size-2.5" aria-hidden /> Builtin
                  </span>
                )}
                {t.category && (
                  <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground" data-testid={`template-category-badge-${t.id}`}>
                    {t.category}
                  </span>
                )}
              </p>
              {t.description ? (
                <p className="truncate text-[11px] text-muted-foreground" data-testid={`template-desc-${t.id}`}>{t.description}</p>
              ) : (
                <p className="text-[11px] text-muted-foreground">
                  {t.type === "database" ? "Database template" : "Page template"}
                </p>
              )}
            </div>
            {/* T-141: read-only preview — VIEW access, so available on every
                row (including builtins) to every member of the union. */}
            <button
              type="button"
              data-testid={`template-preview-${t.id}`}
              className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
              onClick={() => setPreviewTemplate(t)}
            >
              <Eye className="size-3.5" aria-hidden />
              Preview
            </button>
            {!t.isBuiltin && isOwnerOrAdmin && (
              <button
                type="button"
                data-testid={`template-apply-${t.id}`}
                className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50"
                onClick={() => (hasVariables(t) ? setVarsTemplate(t) : apply.mutate(t))}
                disabled={applyingId !== null}
              >
                {applyingId === t.id ? (
                  <Loader2 className="size-3.5 animate-spin" aria-hidden />
                ) : (
                  <Copy className="size-3.5" aria-hidden />
                )}
                {applyingId === t.id ? "Applying…" : "Use"}
              </button>
            )}
          </li>
        ))}
      </ul>
    </div>
    {previewTemplate ? (
      <TemplatePreviewDialog template={previewTemplate} onClose={() => setPreviewTemplate(null)} />
    ) : null}
    {varsTemplate && workspace?.id ? (
      <TemplateVariableDialog
        template={varsTemplate}
        workspaceId={workspace.id}
        workspaceSlug={workspaceSlug}
        onClose={() => setVarsTemplate(null)}
      />
    ) : null}
    </>
  );
}